{% load staticfiles %}

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static  'css/list_custom.css' %}" media="screen" title="no title" charset="utf-8">

</head>

<body>
    <div class="ui inverted top fixed menu borderless red menu">
        <div class="header item">
            <div class="ui image">
                <a href="/index/">
                <img src="{% static 'images/tenlogo.png' %}" alt="">
                </a>
            </div>
        </div>


        <div class="right menu">
            {% if request.user.is_authenticated %}
            <div class="item">
                <a href="/myinfo/">
                <h5 class="ui inverted header">
                        <div class="ui mini circular image">
                        {% if request.user.belong_to.avatar %}
                            <img src="/media/{{ request.user.belong_to.avatar }}" alt="">
                        {% else %}
                            <img src="{% static 'image/default.jpg' %}" alt="">
                         {% endif %}
                        </div>
                    <span>{{ request.user.username }}</span>
            {% endif %}
                </h5>
                </a>
            </div>
            {% if request.user.is_authenticated %}
                <div class="item">
                    <a href="{% url 'logout' %}" class="ui inverted circular button">Logout</a>
                </div>

            {% else %}

                <div class="item">
                    <a href="{% url 'login' %}" class="ui inverted circular button">Signup/Login</a>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="ui inverted segment container nav">
        <div class="ui  three borderless  item  menu">
            <a class="active item"> All </a>
            <a class="item"> New </a>
            <a class="item" href="#"> Editor's </a>
        </div>
    </div>


    <div class="ui basic segment container content">

        <div class="ui three column grid">
            {% for article in article_list %}
            <div class="column">
                <a class="ui fluid card" href="{% url 'detail' article.id %}">
                    <div class="image">
                        <img src="{{ article.img }}" alt="" style="height:200px;object-fit: cover;">
                    </div>
                </a>

                <div class="title header" href="#">{{ article.title }}</div>

                <i class="icon grey unhide"></i>
                <span style="color:#bbbbbb">{{ article.views }}</span>

                <span class="" style="color:rgb(226, 226, 226)">|</span>

                <i class="icon grey checkmark"></i>
                <span style="color:#bbbbbb"> {{ article.likes }} people got it</span>

            </div>
            {% endfor %}

        </div>
    </div>


    <div class="ui center aligned very padded vertical segment container">
        <div class="ui pagination menu">
            {% if article_list.has_previous %}
                <a href="?page={{ article_list.previous_page_number }}" class="item">
                    <i class="icon red left caret"></i>
                </a>
            {% else %}
                <a href="?page={{ article_list.start_index }}" class="disabled item">
                    <i class="icon  left caret"></i>
                </a>
            {% endif %}

            {% for page_number in article_list.paginator.page_range %}
                {% ifequal page_number  article_list.number %}
                    <a href="?page={{ page_number }}" class="active item" style="background-color: red; color:white">
                        {{ page_number }}
                    </a>
                {% else %}
                    <a href="?page={{ page_number }}" class=" item">
                        {{ page_number }}
                    </a>
                {% endifequal %}
            {% endfor %}

            {% if  article_list.has_next %}
                <a href="?page={{ article_list.next_page_number }}" class="item">
                    <i class="icon red right caret"></i>
                </a>
            {% else %}
                <a href="?page={{ article_list.paginator.num_pages }}" class="disabled item">
                    <i class="icon  right caret"></i>
                </a>
            {% endif %}
        </div>
    </div>
</body>

</html>
